<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>条件渲染</title>
</head>
<body>
<div class="box" id="box">
     <button @click="tab">显示</button>  
	 <h1 v-if="condition">
	    我是ok的时候显示的
	  </h1>
  </div>
<!--	<template v-if="error">
		<div>
			<span>1</span>
			<span>2</span>
			<p><span>3</span></p>
		</div>
	</template>
	<template v-else>
		<div>
			<span>4</span>
			<span>5</span>
			<p><span>6</span></p>
		</div>
	</template>
	<!--<div id="demo">
	     <button @click="tab">显示</button>  
		 <custom-component v-show="condition">aaaa</custom-component>
	     <p v-show="!condition">这可能也是一个组件</p>
     </div>-->
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
	(function(){
		"use strict";
		 var vm = new Vue({
			el: "#box",
			data:{
				 "condition":true
			},
			methods:{
				tab:function(){
					this.condition=!this.condition;
				}
			}
		
		})
	})();

</script>
</html>